<template>
  <div class="page1">
    <div class="con">
      <logo :type="'white'"></logo>
      <template v-if="aboutType === 'intro'">
        <img class="co-img1 ani" :src="sec1.img" alt="" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".5s" swiper-animate-delay=".4s">
        <!-- <img class="co-img2 ani" src="./img/co-img2.jpg" alt="" swiper-animate-effect="fadeInRight" swiper-animate-duration=".5s" swiper-animate-delay=".4s"> -->
        <p class="intro ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay=".4s">{{sec1.intro}}</p>
      </template>
      <template v-if="aboutType === 'contact'">
        <img :src="mapUrl" alt="" class="map ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay=".4s">
        <div class="address ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay=".4s">
          <h5 class="name">{{company.chinese}}</h5>
          <p class="loc">{{company.detail}}</p>
          <p class="code">邮编：{{company.postcode}}</p>
          <p class="tel">客服电话：{{company.servicePhone}}</p>
          <img :src="company.qrcode" alt="" class="qr-code">
          <p class="serve-text">{{company.advertisment}}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  import logo from './logo'
  import request from 'src/util/request'

  export default {
    data () {
      return {
        mapUrl: ''
      }
    },
    props: {
      aboutType: {
        type: String,
        default: 'intro'
      },
      renderData: {
        type: Array,
        default: () => {
          return []
        }
      },
      company: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      sec1 () {
        return {
          logo: this.renderData[1].topics[0].topicItems[0].resource,
          img: this.renderData[1].topics[0].topicItems[2].resource,
          intro: this.renderData[1].topics[0].topicItems[1].description,
        }
      }
    },
    created () {
      request({
        url: `/api/topic/descendants/CONTACT_US`
      })().then((data) => {
        this.mapUrl = data[0].topics[0].resource
      })
    },
    components: {
      logo
    }
  }
</script>

<style lang="scss" scoped>
  .page1 {
  	position: relative;
  	height: 100%;
  }

  .con {
  	height: 100%;
  	background-image: url(./img/aboutus-page1.jpg);
  	background-position: bottom center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	color: #fff;
  	.co-img1,
  	.co-img2 {
  		position: absolute;
  		top: rem(404);
  		height: rem(300);
  	}
  	.co-img1 {
  		left: rem(50);
  		right: rem(50);
  		width: rem(650);
  		// width: rem(258);
  	}
  	.co-img2 {
  		right: rem(50);
  		width: rem(372);
  	}
  	.intro {
  		position: absolute;
  		top: rem(730);
  		margin: 0 rem(50);
  		line-height: rem(40);
  		font-size: rem(26);
  	}
  	.map {
  		position: absolute;
  		top: rem(377);
  		left: rem(50);
  		display: block;
  		width: rem(650);
  		height: rem(368);
  	}
  	.address {
  		position: absolute;
  		top: rem(744);
  		left: rem(50);
  		width: rem(650);
  		font-size: rem(26);
  		.name {
  			margin-top: rem(17);
  			line-height: rem(57);
  			font-size: rem(30);
  		}
  		.loc,
  		.code {
  			line-height: rem(42);
  		}
  		.tel {
  			margin-top: rem(24);
  			font-size: rem(36);
  		}
  		.qr-code {
  			position: absolute;
  			top: rem(150);
  			right: 0;
  			display: block;
  			width: rem(135);
  			height: rem(135);
  		}
  		.serve-text {
        margin-top: rem(15);
  		}
  	}
  }
</style>
